<template>
<div>
    <div class="container">
        <div class="videoList" v-for="(temp,index) in 10" :key="index" @click="show = true">
            <div class="video">
                <div class="videoImg">
                  <img src="http://placehold.it/280x315" alt="">
                </div>
                <otherInfo></otherInfo>
            </div>
        </div>
    </div>
     <div class="layer" v-show="show" @click="show = false" >
       <layerInfo></layerInfo>
     </div>
</div>
</template>

<style lang="less">
.container{
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
.videoList{
    box-sizing: border-box;
    padding: 10px 0;
    .video{
        width: 280px;
        height: 315px;
        margin: 0 10px;
        // border:1px solid #ccc;
        box-shadow:0px 2px 25px 0px rgba(189,189,189,0.3);
        border-radius:10px;
        .videoImg{
            width: 100%;
            height: 230px;

            overflow: hidden;
            background: #DADADA;
            border-radius: 10px 10px 0 0;
        }
    }
}
}
</style>

<script>
import otherInfo from "@/components/otherInfo"
import layerInfo from "@/components/layerInfo"
export default {
  components: {
    otherInfo,
    layerInfo
  },
  data() {
    return {
      show: false
    };
  }
};
</script>